<template>
  <div>
    <el-card>
      <h3>订单详情</h3>
      <el-form ref="form" label-width="80px">
        <el-form-item label="订单号">
          <el-input disabled v-model="orderInfo.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input disabled v-model="orderInfo.createTime"></el-input>
        </el-form-item>
        <el-form-item label="收件人">
          <el-input disabled v-model="guestName"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input disabled v-model="orderInfo.statusDesc"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-input disabled v-model="orderInfo.paymentTypeDesc"></el-input>
        </el-form-item>
        <el-form-item label="订单金额">
          <el-input disabled v-model="totalPrice"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="orderInfo.orderItemVoList" stripe style="width: 100%">
        <el-table-column label="商品图片" width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.productImage"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品信息" width="180"></el-table-column>
        <el-table-column prop="currentUnitPrice" label="单价" width="180"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="180"></el-table-column>
        <el-table-column prop="totalPrice" label="合计" width="180"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {
      orderInfo: {},
      guestName: "",
      totalPrice: ""
    };
  },
  computed: {
    // orderInfo() {
    //   return this.$store.state.defaultOrderInfo;
    // }
  },
  watch: {},
  methods: {
    getInfo() {
      this.guestName =
        this.orderInfo.shippingVo.receiverName +
        "," +
        this.orderInfo.shippingVo.receiverProvince +
        "," +
        this.orderInfo.shippingVo.receiverCity +
        "," +
        this.orderInfo.shippingVo.receiverAddress +
        "," +
        this.orderInfo.shippingVo.receiverMobile;
    },
    getPrice() {
      var price = 0;
      this.orderInfo.orderItemVoList.forEach(item => {
        price += item.totalPrice;
      });
      this.totalPrice = "￥" + price;
    }
  },
  beforeCreate() {},
  created() {
    this.orderInfo = this.$store.state.defaultOrderInfo;
  },
  beforeMount() {},
  mounted() {
    this.getInfo();
    this.getPrice();
  }
};
</script> 
<style scoped>
</style>
